<script type="text/javascript">
    $(document).ready(function(){
        $('#bt_comment').click(function(){
            var sComment = $('#tb_content').val();
            if(sComment !='')
            {
                var nameProduct = $('.chitietsptitile_block').text();
                var sUser =$('#tb_user_block').val();
                var iMasp=$('#tb_masp_block').val();
                var img = $('#tb_img_block').val();
                var givename = $('#tb_givenName_block').val();
                if(img.indexOf('http') == -1){
                    img = $('#path').val()+'upload/'+img;
                }
                $.post('~product/addComent',{comment : sComment, masp : iMasp, user : sUser, givename : givename, nameProduct : nameProduct} , function(data){
                    var aData = data.split(';');
                    var addComent =  ' <div class="li_comment">' +
                    '<div>'+
                    '  <div class="image_content" style="float: left; width: 60px;">'+
                    '<img style="max-height: 60px; max-width: 60px;" src="'+img+'">'+
                    '</div>'+
                    '<div class="comment_content" style="float: left;padding-left: 10px; width: 85%;">'+
                    ' <div class="arer_comment">'+
                    '<label hidden="" class="id_comment">'+aData[0]+'</label>'+
                    '<label class="user_comment" style="color: #DF1B23; font-weight: bold;">'+sUser+'</label>'+
                    '<label class="time_publish" style=" float: right; font-size: 12px; color: #A6A6A6; ">Lúc: '+aData[1]+'</label><br>'+
                    '<label>'+sComment+'</label><br>'+
                    '<label><a style="cursor: pointer;" class="reply_coment">Trả lời</a><a class="like_comment" style="cursor: pointer;padding-left: 10px;">Thích</a> <img style="" src="'+$('#path').val()+'image/like.png"><label class="count_like" style="margin-left: 2px;">0</label> <a style="cursor: pointer;">Phản hồi(0)</a></label><br>'+
                    '<div class="reply_addAfter" hidden="true"></div></div>'+
                    ' </div>'+
                    '</div><div class="add_reply" style="clear: both;"></div>'+
                    ' </div>';
                    $(addComent).insertAfter('#add_ajaxTop');
                    $('#tb_content').val('');
                    $('#tb_content').css('height','42px');
                });
            }
            else
            {
                alert('Please type comment !');
            }
        });
        $('#bt_loadMore_coment').click(function(){
            var iMasp=$('#tb_masp_block').val();
            var limit =$('#tb_limit_block').val();
            $.post('~product/loadMore',{masp : iMasp, limit: limit} , function(data){
                if(data!= '')
                {
                    var aData = data.split('*&*');
                    $(aData[0]).insertAfter('#add_ajaxBottom');
                    if(aData[1] !='true')
                    {
                        $('#div_loadmore').hide();
                    }
                    $('#tb_limit_block').val(limit+5);
                }
                else
                {
                    $('#div_loadmore').hide();
                }
            });
        });

        $('.content_comment').on('click','.like_comment',function(){
            var sUser =$('#tb_user_block').val();
            if(sUser !='')
            {
                var title = $(this).text();
                var parent = $(this).closest('.arer_comment');
                var test = parent.find('.count_like').text();
                var countlike = parseInt(test);
                var user_comment = parent.find('.user_comment').text();
                var iMasp=$('#tb_masp_block').val();
                var skill = 1;
                if(title == 'Thích')
                {
                    countlike++;
                    parent.find('.count_like').text(countlike);
                    $(this).text('Không thích ');
                }
                else
                {
                    skill=0;
                    countlike--;
                    parent.find('.count_like').text(countlike);
                    $(this).text('Thích');
                }
                var comment_id = parent.find('.id_comment').text();
                $.post('~product/updateLike',{masp : iMasp, user : sUser, comment_id : comment_id,like: countlike,skill :skill,user_comment: user_comment} , function(data){
                    console.log(data);
                });
            }
            else
            {
                alert('Request Login !');
            }
        });
        $('.content_comment').on('click','.like_comment_reply',function(){
            var sUser =$('#tb_user_block').val();
            if(sUser !='')
            {
                var title = $(this).text();
                var parent = $(this).closest('.li_comment_reply');
                var test = parent.find('.count_like_reply').text();
                var user_comment = parent.find('.user_comment').text();
                var countlike = parseInt(test);
                var iMasp=$('#tb_masp_block').val();
                var skill = 1;
                if(title == 'Thích')
                {
                    countlike++;
                    parent.find('.count_like_reply').text(countlike);
                    $(this).text('Không thích ');
                }
                else
                {
                    skill=0;
                    countlike--;
                    parent.find('.count_like_reply').text(countlike);
                    $(this).text('Thích');
                }
                var comment_id = parent.find('.id_comment_reply').text();
                $.post('~product/updateLike',{masp : iMasp, user : sUser, comment_id : comment_id,like: countlike,skill :skill,user_comment:user_comment} , function(data){
                    console.log(data);
                });
            }
            else
            {
                alert('Request Login !');
            }
        });

        $('.content_comment').on('click','.reply_coment',function(){
            var sUser =$('#tb_user_block').val();
            if(sUser !=''){
                var parent = $(this).closest('.arer_comment');
                if(parent.find('.comment_box').length == 0){
                    var reply_html = '';
                    reply_html += '<div class="comment_box reply_comment_box">';
                    reply_html +=   '<div class="image_content">';
                    reply_html +=       '<img src="' + $('.avatar_header').attr('src') + '" alt="">';
                    reply_html +=   '</div>';
                    reply_html +=   '<div class="text_content">';
                    reply_html +=       '<textarea class="tb_content_reply" placeholder="Trả lời bình luận" onkeyup="textAreaAdjust(this)"></textarea>';
                    reply_html +=       '<div class="button_panel">';
                    reply_html +=           '<input class="bt_reply_comment link_button" type="button" class="link_button" value="Trả lời">';
                    reply_html +=       '</div>';
                    reply_html +=   '</div>';
                    reply_html +=   '<div style="clear:both;"></div>';
                    reply_html += '</div>';
                    parent.find('.reply_addAfter').after(reply_html);
                }
                else{
                    parent.find('.comment_box').remove();
                }
            }
            else{
                alert('Request Login !');
            }

        });
        $('.content_comment').on('click','.tb_content_reply',function(){
            var parent = $(this).closest('.reply_comment');
            $(this).text('');
            parent.find('.bt_reply_comment').show();
        });
        $('.content_comment').on('click','.bt_reply_comment',function(){
            var parent = $(this).closest('.arer_comment');
            var sComment =parent.find('.tb_content_reply').val();
            if(sComment !='')
            {
                var nameProduct = $('.chitietsptitile_block').text();
                var img = $('#tb_img_block').val();
                if(img.indexOf('http') == -1){
                    img = $('#path').val()+'upload/'+img;
                }
                var id_cm = parent.find('.id_comment').text();
                var sUser =$('#tb_user_block').val();
                var iMasp=$('#tb_masp_block').val();
                var givename = $('#tb_givenName_block').val();
                var sComment =parent.find('.tb_content_reply').val();
                $.post('~product/addComent',{comment : sComment, masp : iMasp, user : sUser, id_reply:id_cm,givename : givename, nameProduct : nameProduct} , function(data){
                    var aData = data.split(';');
                    var addComent = 
                    '<div class="li_comment_reply">' +
                    '   <div style="margin-bottom: 10px;">'+
                    '       <div class="image_content" style="float: left;width:10%;">'+
                    '           <img style=" max-height: 60px; max-width: 60px;" src="'+img+'">'+
                    '       </div>'+
                    '       <div class="reply_content" style="float:left;padding-left:20px;width:85%;">'+
                    '           <div class="arer_comment">'+
                    '               <label hidden="" class="id_comment_reply">'+aData[0]+'</label>'+
                    '               <label class="user_comment" style="color: #DF1B23; font-weight: bold;">'+sUser+'</label>'+
                    '               <label class="time_publish" style=" float: right; font-size: 12px; color: #A6A6A6; ">Lúc: '+aData[1]+'</label><br>'+
                    '               <label>'+sComment+'</label><br>'+
                    '               <label><a class="like_comment_reply" style="cursor: pointer;">Thích</a> <img style="" src="'+$('#path').val()+'image/like.png"><label class="count_like_reply" style="margin-left: 2px;">0</label></label><br>'+
                    '           </div>'+
                    '       </div>'+
                    '   </div>' + 
                    '   <div class="add_reply" style="clear: both;"></div>'+
                    '</div>';
                    parent.find('.comment_box').remove();
                    parent.append(addComent);
                });
            }
            else
            {
                alert('Please type comment !');
            }
        });
        $('.content_comment').on('click','.respone_comment',function(){
            var parent = $(this).closest('.arer_comment');
            var comment_id = parent.find('.id_comment').text();
            $.post('~product/loadReply',{commnet_id : comment_id} , function(data){
                if(data != ''){
                    $(data).insertAfter(parent.find('.reply_addAfter'));
                }
            });
            $(this).hide();

        });

        // Hieu ung focus vao textarea
        $('.comment_area').on('focus','.comment_box .text_content textarea',function(){
            var parent = $(this).closest('.comment_box');
            parent.find('.text_content').addClass('focus_comment_box'); 
            parent.find('.button_panel').css('display','block');
        });

        $('.comment_area').on('blur','.comment_box .text_content textarea',function(){
            var parent = $(this).closest('.comment_box');
            parent.find('.text_content').removeClass('focus_comment_box'); 
            if($(this).val() == ''){
                $(this).css('height','42px');
                parent.find('.button_panel').css('display','none');
            }
        });
    });
    function textAreaAdjust(o) {
        o.style.height = "1px";
        o.style.height = (25+o.scrollHeight)+"px";
    }
</script>

<input hidden ="" id="tb_givenName_block" value="<?php echo $template->get('givenName'); ?>"></input>
<input hidden="true" id="tb_img_block" value="<?php  if(isset($_SESSION['avatar'])){echo $_SESSION['avatar'];}?>"></input>
<input type="text" hidden="true" id="tb_masp_block" value="<?php echo $template->get('product_id') ?>"></input>
<p hidden="" class="chitietsptitile_block"><?php echo $template ->get('name') ?></p>
<?php
    $username ='';
    if(isset($_SESSION['username']))
    {
        $username = $_SESSION['username'];
    }
?>
<input type="text" id="tb_user_block" hidden="true" value="<?php echo $username ?>"></input>
<input type="text" id="tb_limit_block" hidden="true" value="10"></input>
<div class="comment_area" style=" margin-left: 10px;background-color:#FFF;min-height: 100px;">
    <?php
        if(isset($_SESSION['username'])){?>
        <div class="comment_box">
            <div class="image_content">
                <img src="<?php echo URL::getLink('upload/'.$_SESSION['avatar']); ?>" alt="">
            </div>
            <div class="text_content">
                <textarea id="tb_content" placeholder="Chia sẻ suy nghĩa của bạn" onkeyup="textAreaAdjust(this)"></textarea>
                <div class="button_panel">
                    <input id="bt_comment" type="button" class="link_button" value="Chia sẻ">
                </div>
            </div>
        </div>
        <?php }?>
    <div style="clear: both;"></div>
    <div class="content_comment" id="arer_comment">
        <div id="add_ajaxTop"></div>
        <?php
            core::checkSession();
            $oDatabase = new database();
            $query ='SELECT avatar,comment_id,masp_id,user,noidung,thoigian,like_comment,reply_id FROM user,binhluan WHERE user.user_id = binhluan.user AND masp_id="'.$template->get('product_id').'" AND reply_id = 0 ORDER BY comment_id DESC LIMIT 10';
            $aListProduct = $oDatabase->getListObject($query);
            if(count($aListProduct))
            {
                $like ='Thích';
                $username ='';
                $respone =0;
                if(isset($_SESSION['username']))
                {
                    $username = $_SESSION['username'];
                }
                foreach($aListProduct as $key => $product)
                {
                    $like = 'Thích';
                    $respone =0;
                    if($username !='')
                    {
                        $query = 'SELECT * FROM comment_like where user ="'.$username.'" AND comment_id ='.$product->comment_id;
                        $aLike = $oDatabase->getListObject($query);
                        if(count($aLike))
                        {
                            $like ='Không thích';
                        }
                        $queryReply =' SELECT * FROM binhluan WHERE reply_id = '.$product->comment_id;
                        $aReply = $oDatabase->getListObject($queryReply);
                        {
                            if(count($aReply))
                            {
                                $respone = count($aReply);
                            }
                        }
                    }

                ?>
                <div class="li_comment">
                    <div>
                        <div class="image_content" style="float: left; width: 60px;">
                            <img style=" max-height:60px; max-width: 60px;" src="<?php echo URL::getLink('upload/'.$product->avatar); ?>">
                        </div>
                        <div class="comment_content" style="float: left;padding-left: 10px; width: 85%;">
                            <div class="arer_comment">
                                <label hidden="" class="id_comment"><?php echo $product->comment_id ?></label>
                                <label class="user_comment" style="color: #DF1B23; font-weight: bold;"><?php echo $product->user?></label>
                                <label class="time_publish" style=" float: right; font-size: 12px; color: #A6A6A6; ">Lúc: <?php echo date('H:i Y-m-d' ,$product->thoigian)?></label><br>
                                <label><?php echo $product->noidung?></label><br>
                                <label style="color: #3581e0;"><a style="cursor: pointer;" class="reply_coment">Trả lời</a>
                                    <a class="like_comment" style="cursor: pointer;padding-left: 10px;"><?php echo $like ?></a> 
                                    <img style="" src="<?php echo URL::getLink('image/like.png'); ?>">
                                    <label class="count_like" style="margin-left: 2px;"><?php echo $product->like_comment?></label> <a class="respone_comment"  style="cursor: pointer;">Phản hồi(<?php echo $respone ?>)</a></label><br>
                                <div class="reply_addAfter" hidden="true"></div>
                            </div>
                        </div>
                    </div>
                    <div class="add_reply" style="clear: both;"></div>
                </div>
                <?php }
            }
        ?>
        <div id="add_ajaxBottom"></div>
    </div>
    <?php
        if(count($aListProduct)>10)
        {
        ?>
        <div class="coment_loadmore" id="div_loadmore">
            <label id="bt_loadMore_coment" style=" line-height: 30px; margin-left: 250px;cursor: pointer; color: #415E9C;font: 200 13px/1.5 Georgia, Times New Roman, serif;">Xem thêm bài đăng</label>
        </div>
        <?php
        }
        else
        {?>
        <div hidden="" class="coment_loadmore" id="div_loadmore">
            <label id="bt_loadMore_coment" style=" line-height: 30px; margin-left: 250px;cursor: pointer; color: #415E9C;font: 200 13px/1.5 Georgia, Times New Roman, serif;">Xem thêm bài đăng</label>
        </div>  
        <?php }
    ?>
</div>
<div style="clear: both;"></div>